<template>
<div class="wrap">
	<div class="title">
		<span>账户余额: <i>¥{{money}}</i></span>
	</div>
	<div class="cont">
		<h3>请选择充值金额 :</h3>
		<span v-for="(money,index) in amountarr" @click="get(index)" class="money">{{money}}元</span>
		<h3>充值有礼</h3>
		<div class="gift">
			<div class="giftcard" v-for="card in cards">
				<span v-for="item in card.giftarr">{{item}}</span>
			</div>
		</div>		
		<button @click="recharge">立即充值</button>
	</div>
</div>
</template>

<script>
	export default{
		name:"mywallet",
		data(){
			return{
				money:20,
			    amountarr:[500,1000,2000],
			    charge:"",
			    cards:[{giftarr:["充500元送 :","新疆哈密瓜25kg","价值 : 500"]},{ giftarr:["充500元送 :","新疆哈密瓜25kg","价值 : 500"]}]			    
			}
		},
		methods:{		
			get:function(index){
				var money = this.amountarr[index];
				console.log(money);
				this.charge = money;
			},
			recharge:function(){
				this.money +=this.charge 
//				console.log();
			}
		}
	}
</script>

<style scoped>
.wrap{
	width: 1085px;
	height: 623px;
	border: 1px solid rgb(242,242,242);	
}
.title{
	font-weight: 300;
	font-size: 18px;
	color: rgb(60,60,60);
	text-indent: 22px;
	line-height: 58px;
	border-bottom: 1px solid rgb(242,242,242);
	text-shadow: 1px 1px 1px rgb(245,245,245);	
}
.title i{
	font-style: normal;
	color: rgb(248,141,48);
}
.cont{
	padding-left: 42px;
}
h3{
	font-size: 18px;
	color: rgb(60,60,60) ;
	font-weight: 400;
	text-shadow: 1px 1px 1px rgb(245,245,245);
}
h3:nth-of-type(1){
	padding-top: 42px;
}
h3:nth-of-type(2){
	color: rgb(250,166,84);
	margin-bottom: 20px;
}
.cont>span{
	display: inline-block;
	width: 113px;
	line-height: 32px;
	border: 1px solid rgb(224,224,224);
	text-align: center;
	margin: 20px 38px 40px 0;
	color: rgb(60,60,60) ;
	font-weight: 400;
	text-shadow: 1px 1px 1px rgb(245,245,245);
}
.cont>span:hover{
	border: 1px solid rgb(133,187,107);
	background-color: rgb(243,255,243);
}
button{
	display: inline-block;
	width: 150px;
	height: 50px;
	border: none;
	color: white;
	font-size: 18px;
	background-color: rgb(247,131,39);
	border-radius: 5px;
	margin-top: 35px;
}
.giftcard{
	display: inline-block;
	width: 357px;
	height: 191px;
	background: url(../../assets/image/orange.png) no-repeat;
	margin-right: 40px;
}
.giftcard>span{
	display: block;
	font-size: 18px;
	color: rgb(60,60,60) ;
	font-weight: 400;
	text-shadow: 1px 1px 1px rgb(245,245,245);
}
.giftcard>span:nth-child(1){
	padding:21px 0 0 21px;
}
.giftcard>span:nth-child(2){
	padding:30px 0 0 192px;
}
.giftcard>span:nth-child(3){
	padding:12px 0 0 192px;
}
</style>